import React, { Component } from 'react';
import styles from './searchBar.less';
import { Tag } from 'antd';
const { CheckableTag } = Tag;
import { initial, area, type } from '../catData';

const SearchBar: any = (props: any) => {
  let { selectedInitial, selectedArea, selectedType, setCat } = props;

  const initialChange = (data: any, checked: any) => {
    if (checked) {
      setCat({
        type: 'initial',
        ...data,
      });
    }
  };

  const areaChange = (data: any, checked: any) => {
    if (checked) {
      setCat({
        type: 'area',
        ...data,
      });
    }
  };
  const typeChange = (data: any, checked: any) => {
    if (checked) {
      setCat({
        type: 'type',
        ...data,
      });
    }
  };

  return (
    <div>
      <div className={styles.searchRow}>
        {initial.map((data: any, index: number) => (
          <CheckableTag
            key={index}
            checked={selectedInitial.value == data.value}
            onChange={checked => initialChange(data, checked)}
          >
            {data.label}
          </CheckableTag>
        ))}
      </div>
      <div className={styles.searchRow}>
        {area.map((data: any, index: number) => (
          <CheckableTag
            key={index}
            checked={selectedArea.value == data.value}
            onChange={checked => areaChange(data, checked)}
          >
            {data.label}
          </CheckableTag>
        ))}
      </div>
      <div className={styles.searchRow}>
        {type.map((data: any, index: number) => (
          <CheckableTag
            key={index}
            checked={selectedType.value == data.value}
            onChange={checked => typeChange(data, checked)}
          >
            {data.label}
          </CheckableTag>
        ))}
      </div>
    </div>
  );
};

export default SearchBar;
